<template>
    <div>
        <van-row @click="toShowLoginPopup">
            <van-col span="6"><img :src="avatarSrc" alt=""></van-col>
            <van-col span="10">{{userNickname}}</van-col>
            <van-col span="8"><van-icon :name="logIcon"  @click="toShowDialog"/></van-col>
        </van-row>
        <van-grid :column-num="3">
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
        </van-grid>

        <!-- 登录弹出框 -->
        <van-popup v-model="isShowLoginPopup">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block  color="darkred" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </van-popup>


        <!-- 退出登录确认框 -->
        <van-dialog v-model="isShowDialog" title="请确认" show-cancel-button @confirm="logout">
            确认退出登录吗？
        </van-dialog>
    </div>
</template>

<script>
import {UserLogin} from "@/request/api"
import avatarSrc from "../assets/avatar.png"
import { mapState, mapMutations} from "vuex"
export default {
    data () {
        return {
            avatarSrc,
            isShowLoginPopup:false,
            username: '',
            password: '',
            userNickname:"点击登录",
            logIcon:"arrow",
            isShowDialog:false
        }
    },
    computed:{
        ...mapState({
            isGoBack:state=>state.isGoBack.isGoBack
        })
    },
    created(){
        // 登录成功之后，页面一刷新，头像和昵称又回到默认值。
        // 所以，在来到这个页面的时候，应该先获取userInfo。如果获取到了，就应该填到页面上。

        let userInfo = localStorage.getItem("userInfo");

        if(userInfo){
            userInfo = JSON.parse(userInfo);
            this.avatarSrc = userInfo.avatar;
            this.userNickname = userInfo.nickname;
            this.logIcon = "cross"
        }
    },
    methods: {
        ...mapMutations({
            changeIsGoBack:"isGoBack/changeIsGoBack"
        }),
        logout(){
            // 执行退出登录的操作：
            // 1、提示用户退出登录成功
            this.$toast.success("退出成功！");
            // 2、删除token值，和用户的基本信息userInfo 
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            // 3、修改页面上的用户头像，用户昵称等信息，还原回默认值
            this.avatarSrc = avatarSrc;
            this.userNickname = "点击登录";
            this.logIcon = "arrow";
        },
        toShowDialog(){
            // 先判断有没有登录， 如果没有登录， 就return
            let token = localStorage.getItem("token");
            if(!token){
                return
            }

            this.isShowDialog = true
        },
        toShowLoginPopup(){
            // 先判断有没有登录，如果已经登录了，就不能展示登录框了，就应该return
            let token = localStorage.getItem("token");
            if(token){
                return
            }
            this.isShowLoginPopup = true;
        },
        onSubmit(values) {
            // console.log('submit', values["用户名"], values["密码"]);
            UserLogin({
                username:values["用户名"],
                pwd:values["密码"]
            }).then(res=>{
                // 登录成功的业务逻辑：
                // 1、提示用户登录成功
                // 2、保存token值，和用户的基本信息userInfo 到本地存储
                // 3、关闭登录窗口
                // 4、修改页面上的用户头像，用户昵称等信息

                // 1、提示用户登录成功
                this.$toast.success("登录成功！");
                // 2、保存token值，和用户的基本信息userInfo 到本地存储
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
                setTimeout(()=>{
                    // 3、关闭登录窗口
                    this.isShowLoginPopup=false;
                    // 4、修改页面上的用户头像，用户昵称等信息
                    this.avatarSrc = res.data.userInfo.avatar;
                    this.userNickname = res.data.userInfo.nickname;
                    this.logIcon = "cross";

                    // 5、跳转回原来的页面
                    // 并不是所有的情况，登录之后都要跳转回上级路由的。如果是用户主动来到登录页面，进行登录，应该仍然停留在/user页面。
                    // 这时，我们需要一个变量，来决定是否应该返回上一级(this.$router.go(-1))。
                    // 这个变量可能被任意组件所修改，所以最优的选择是把这个变量放在Vuex中。

                    // 需要在哪里把isGoBack改成true? 在强制需要跳转登录的时候，即utils中的mustBeLogin方法中
                    console.log(this.isGoBack);
                    if(this.isGoBack){
                        this.changeIsGoBack(false);
                        this.$router.go(-1);
                    }
                    
                },500);
            })

        },
    },
}
/*

token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo0ODE0LCJpYXQiOjE2MjAyODM4MDd9.i7Q_w749mGfZv_5vXtWrJXkdyBA3yafU7BkGII3OjFA"
userInfo: {id: 4814, username: "54354", nickname: "默认用户1620283807", gender: 1, avatar: "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3140403455,2984550794&fm=26&gp=0.jpg", …}

*/
</script>
 
<style lang = "less" scoped>
.van-row{
    padding: .2rem .1rem;
    background-color: #333;
    color:#fff;

    .van-col{
        line-height: .7rem;
        img{
            width: .7rem;
            display: block;
            border-radius: 50%;
        }
        &:last-child{
            text-align: right;
        }
    }
    
}
.van-popup{
    width:85%;
}
/*深度修改UI组件里面的样式*/
/deep/.van-grid-item__content{
    padding: .3rem .08rem;
}
/deep/.van-dialog__content{
    text-align: center;
    line-height: .8rem;
}
</style>